<template>
  <!-- <van-icon color="#777" name="star-o" /> -->
  <!-- <van-button
       :icon="value?'star':'star-o'" 
       :class="{collected:value}"
       ></van-button> -->

  <van-icon
    :name="value ? 'star' : 'star-o'"
    :class="{ collect: this.value }"
    @click="onCollect"
    :loading="loading"
  />
</template>

<script>
import { addCollect, deleteCollect } from "@/api/article.js";
export default {
  name: "CollectArticle",
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    articleId:{
            type:[Number,String,Object],
            required:true
    }
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    async onCollect() {
        this.loading = true;//加载
      try {
          if(this.value){//已经收藏 需要取消
            await  deleteCollect(this.articleId)
          }else{
              await addCollect(this.articleId)
          }
          this.$emit("input",!this.value);

        // this.value没有实时更新 所以要取反;
          this.$toast.success(!this.value?"收藏成功!":"取消收藏!")
      } catch (err) {
          this.$toast.fail("操作失败,请重试!")
      }

      this.loading=false;//加载结束;
    },
  },
};
</script>

<style scoped lang="less">
.collect {
  color: #ffa500 !important;
}
</style>
